<template>
  <!--加入购物车的按钮-->
  <div class="cartcontrol">
  <!--减少-->
  <div class="cart-decrease iconfont" v-show="this.food.count>0" @click.stop.prevent='decreaseCart'>&#xe74b;</div>
  <!--数字-->
  <div class="cart-count" v-show="this.food.count>0">{{this.food.count}}</div>
  <!--增加-->
  <div class="cart-add iconfont" @click.stop.prevent='addCart'>&#xe69d;</div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name:'cartcontrol',
  props:{
    //父组件goods传来的对象，包含每种食品的信息，使用vue.set添加count属性计数
    food:{
      type:Object
    }
  },
  methods:{
    addCart(event){
      if (!event._constructed) {//如果不是better-scroll派发的点击事件，则返回
          return;
      }
      if (!this.food.count) {
        Vue.set(this.food, 'count', 1);
      }else{
        this.food.count++;
      }
    },
    decreaseCart(event){
      if (!event._constructed) {
        return;
      }
      if(this.food.count){
        this.food.count--;
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
 .cartcontrol
    font-size: 0
    .cart-decrease,.cart-add
      display: inline-block
      line-height:24px 
      padding:6px 
      color:rgb(0, 160, 220)
      vertical-align:top
    .cart-decrease
      font-size:18px
    .cart-add
      font-size:24px 
      padding:6px 
    .cart-count
      display: inline-block
      width:12px 
      line-height:24px
      padding-top:6px
      font-size:10px 
      vertical-align:top
      text-align:center 
      color:rgb(147,153,159)
</style>